<template>
	<view class="content" hover-class="hover">
		<view class="innter" hover-class="test" hover-stop-propagation></view>
	</view>
	<text selectable>
		<navigator url="/pages/demo/demo">让我来看看</navigator>
	</text>
	<scroll-view scroll-x="true" class="scroll">
		<view class="box">hello java</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
		<view class="box">hello</view>
	</scroll-view>
	<view>
		<button size="mini" plain="true" loading="true">按钮点击</button>
	</view>
	<view>
		{{name+"nihao"}}
	</view>
	<view>
		{{a}}
	</view>
	<input type="text" placeholder="请输入密码" placeholder-style="color:orange" password="true" maxlength="10">
	<view>
		<image :src="picture" mode=""></image>
	</view>
	<view class="conten" @click="onclick" :style="{background:hei}">
		{{num}}	
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const hei = ref("green")
	let num =ref(0)
	function onclick(){
		num.value ++
	}
	let arrs = ref(["/static/picture1.jpg","/static/picture2.jpg","/static/picture3.jpg"])
	const picture = ref("/static/picture1.jpg")
	let time = 0
	setInterval(()=>{
		time++
		picture.value = arrs.value[time%3]
	} 
	,1000)
	let a =ref(10)
	setInterval(()=>{
		a.value++
	},2000)
	let arr =[1,2,3,4]
	const name = "WangLeYi"
</script>

<style lang="scss">
	.conten{
		background-color: red;
		width: 200px;
		height:120px;
	}
	.scroll{
		width: 500px;
		height: 150px;
		border: solid 1px yellow;
		white-space: nowrap;
		.box{
			width: 100px;
			height: 100px;
			background-color: gray;
			border: 2px solid red;
			display: inline-block;
			margin: 3px;
		}
	}
	.content{
		width: 200px;
		height: 200px;
		background-color: orange;
	}
	.hover{
		background-color: pink;
	}
	.innter{
		width: 150px;
		height: 150px;
		background-color: purple;
	}
	.test{
		background-color: green;
	}
</style>
